﻿@{
    Layout = null;
}

<style type="text/css">
    .row
    {
        min-height: 30px;
    }
    
    .col-one-input-label 
    {
        width: 100px;
        display: inline-block;
        vertical-align: top;
        margin-top: 5px;
    }

    .col-one-input-field
    {
        width: 150px;
    }

    .col-separator
    {
        width:25px;
        display: inline-block;
    }
    
    .col-two-input-label 
    {
        width: 150px;
        display: inline-block;
        vertical-align: top;
        margin-top: 5px;
    }

    .col-two-input-field
    {
        width: 150px;
    }

    #address
    {
        width: 490px;
    }
    
    #windowButtonRow
    {
        width: 625px;
        text-align: center;
    }
    
    .window-button
    {
        width: 50px;
    }
</style>

<h2>Employees</h2>
<h3>Demonstration of overriding the default Kendo UI Grid behavior and implementing edit in a Dialog</h3>

@(Html.Kendo().Grid<NorthwindSample.Data.Employee>()
    .Name("employeesGrid")
    .ToolBar(toolbar => toolbar.Create())
    .Columns(columns =>
    {
        columns.Bound(m => m.LastName).ClientTemplate("#=TitleOfCourtesy# #=FirstName# #=LastName#").Title("Name");
        columns.Bound(m => m.Title);
        columns.Bound(m => m.Extension);
        columns.Bound(m => m.EmployeeID).ClientTemplate(
            "<a class='k-button' onclick='Employees.employeeGrid_onEdit({ id: #=EmployeeID# });'><span class='k-icon k-edit'></span>Edit</a>" +
            "<a class='k-button' onclick='Employees.employeeGrid_onDelete({ id: #=EmployeeID# });'><span class='k-icon k-delete'></span>Delete</a>"
        ).Width(190).Title("");
    })
    .DataSource(dataSource => dataSource.Ajax()
        .Model(model => model.Id(m => m.EmployeeID))
        .Read(read => read.Action("GetEmployees", "Employees"))
        .Create(create => create.Action("Action", "Controller"))
    )
    .Selectable()
)

@(Html.Kendo().Window()
    .Name("employeeDetailsWindow")
    .Title("Northwind Employee")
    .Width(640)
    .Height(375)
    .Visible(false)
    .Modal(true)
    .Content(
        @<div id="employeeDetailsWindow_Contents"></div>
    )
)

<script src="@Url.Content("~/Scripts/Employees.js")"></script>

<script>
    Employees.init();
</script>